（jQuery） jQuery中的事件与动画（上）

头像
kimi013
    阅读 4 分钟
    1

    一、事件

    1.1 $(document).ready()与window.onload的比较

    1.1.1 执行时机

    • $(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用，但是，这并不意味着这些元素关联的文件都已经下载完毕，如果脚本中要获取图片的长度与宽度等属性，请不要用此方法。

    • window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，即JS此时才可以访问网页中的任何元素。

    1.1.2 多次使用

    • $(document).ready()方法

    function one() {
  alert('one');
}

function two() {
  alert('two');
}

$(document).ready(function() {
  one();
});

$(document).ready(function() {
  two();
});

    运行代码后，会先弹出字符串one对话框，然后再弹出字符串two对话框。

    • window.onload

    // 省略one与two函数的声明
window.onload = one;
window.onload = two;

    运行代码后，只弹出字符串two对话框。因为load事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数。因此不能在现在的行为上添加新的行为。
    可以用下面的方法：

    window.onload = function () {
  one();
  two();
}

    虽然这样的能解决某些问题，但还是不能满足某些需求。例如有多个js文件，每个文件都要用到window.onload方法，这种情况下用上面的方法就会非常麻烦，而$(document).ready()就可以处理这些情况。

    1.2 事件绑定bind

    bind(type [, data], fn)

    • type：事件类型，包括click、mousedown等。

    • data：作为event.data属性传递给事件对象的额外数据对象，可选。

    • fn：用来绑定的处理函数。

    $(function() {
  $('#panel h5.header').bind('mouseover', function(event) {
    $(this).next().show();
  }).bind('mouseout', function(event) {
    $(this).next().hide();
  });
});

    1.3 合成事件

    1.3.1 hover()方法

    hover(enterFn, leaveFn)

    hover()方法用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enterFn)，当光标移出这个元素时，会触发指定的第二个函数（leaveFn)。hover()方法替代的是bind('mouseenter')与bind('mouseleave')。

    $(function() {
  $('.#panel h5.header').hover(function() {
    $(this).next().show();
  }, function() {
    $(this).next().hide();
  });
});

    1.4 事件冒泡

    1.4.1 什么是冒泡

    <body>
  <div class = "content">
    <span></span>
  </div>
</body>
    // 为span绑定事件
$('span').bind('click', function(event) {
  alert('Span is clicked.');
});
// 为div绑定事件
$('.content').bind('click', function(event) {
  alert('Div is clicked.');
});
// 为body绑定事件
$('body').bind('click', function(event) {
  alert('Body is clicked.');
});

    当点击<span>元素时，<span>、<div>、<body>元素的click事件依次被触发。
    事件会按照DOM的层次结构像水泡一样不断向上直至顶端。

    1.4.2 事件冒泡引发的问题

    • 停止事件冒泡
      事件冒泡会引起预料之外的效果。可用stopPropagation()方法来停止冒泡。

    $('span').bind('click', function(event) {
  event.stopPropagation();
  alert('Span is clicked.');
});

    此时点击<span>元素时，只会执行<span>的click事件。

    • 阻止默认行为
      可用preventDefault()方法来阻止元素的默认行为。

    举例，在项目中，经常需要验证表单，在单击“提交”按钮时，验证表单内容，例如某元素是否是必填字段，某元素长度是否够6位等，当表单不符合提交条件时，要阻止表单的提交（默认行为）。

    $(function() {
  $('#sub').bind('click', function(event) {
    var username = $('#username').val();
    if (username === '') {
      $('#msg').html('<p>文框的值不能为空</p>');
      event.preventDefault();
    }
  });
});

    如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数return false。这是对在事件对象上同时调用stopPropagation()方法和event.preventDefault()。

    • 事件捕获
      事件捕获和事件冒泡是刚好相反的两个过程，事件捕获是从最顶端往下开始触发。

    并非所有主流浏览器都支持事件捕获，并且这个缺陷无法通过js来修复。

    1.6 移除事件

    `unbind([type], [data]);

    第一个参数是事件类型，第二个参数是将要移除的函数：

    • 如果没有参数，则删除所有绑定的事件。

    • 如果提供了事件类型作为参数，则只删除该类型的绑定事件。

    • 如果把绑定时传递的函数作为第二个参数，则只有这个特定的事件处理函数会被删除。

    1.7 one()方法

    one(type, [data], fn)

    one()方法的结构与bind()方法类似，使方法也与bind()方法相同。使用one()方法为元素绑定事件后，只在第一次触发事件时，处理函数才执行，之后的触发毫无作用。

    1.8 模拟操作

    trigger(type, [data])

    • 第一个参数是要触发的事件类型

    • 第二个参数是要传递给事件处理函数的附加数据

    1.8.1 常用模拟

    使用trigger()方法

    $('#btn').trigger('click');
// or
$('#btn).click();

    1.8.2 触发自定义事件

    $('#btn').bind('myClick', function () {
  // do sth
});

$('#btn').trigger('myClick');

    1.8.3 传递数据

    // 获取数据
$('#btn').bind('myClick', function(event, msg1, msg2) {
  $('#test').append('<p>' + msg1 + msg2 + '</p>'); 
});

// 传递两个数据
$('#btn').trigger('myClick', ['我的自定义', '事件']);

    1.8.4 执行默认操作

    trigger()方法触发事件后，会执行浏览器默认操作。
    如果只想触发绑定的事件，而不想执行浏览器的默认操作，可以使用triggerHandler()方法。

    $('input').triggerHandler('focus');

    1.9 其他用法

    1.9.1 绑定多个事件类型

    $(function() {
  $('div').bind('mouseover mouseout', function(event) {
    $(this).toggleClass('over');
  });
});

    1.9.2 添加事件命名空间，便于管理

    $(function() {
  $('div').bind('click.plugin', function(event) {
    $('body').append('<p>click event</p>');
  });
  $('div').bind('mouseover.plugin', function (event) {
    $('body').append('<p>mouseover event</p>');
  })
  $('div').bind('dbclick', function(event) {
    $('body').append('<p>dbclick event</p>');
  });
  $('button').bind('click', function(event) {
    $('div').unbind('.plugin');
  });
});

    点击<button>元素后，.plugin的命名空间被删除，而dbclick事件依然存在。

    1.9.3 相同事件名称，不同命名空间执行方法

    $(function() {
  $('div').bind('click', function(event) {
    $('body').append('<p>click event</p>');
  });
  $('div').bind('click.plugin', function(event) {
    $('body').append('<p>click.plugin event</p>');
  });
  $('button').bind('click', function(event) {
    $('div').trigger('click!'); // 注意click后面的叹号
  });
});

    trigger('click!')中叹号的作用是只触发click事件，不触发click.plugin事件。

    jquery
    kimi013
    247 声望10 粉丝
    « 上一篇
    （CSS） 带有右侧边栏的响应式页面的CSS样式
    下一篇 »
    （CSS） px，pt，em，rem的区别

    引用和评论

    推荐阅读
    头像
    （Ajax）axios源码简析（三）——请求与取消请求

    kimi013赞 4阅读 3.6k

    头像
    采用测试驱动开发理念(Test Driven Development)进行 SAP UI5 应用的功能开发(二)试读版

    注销阅读 1.1k

    0 条评论
    得票最新